<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { FormInstance } from '../../components/form/src/types/types.ts'
import optionList from './data/options.ts'
import { ref } from 'vue'

interface Scope {
  form: FormInstance
  model: any
}

let options = optionList

let form = ref()

let handleSuccess = (val: any) => {
  console.log('handleSuccess')
  console.log(val.response, val.file, val.fileList)
}

let onSubmit = (scope: Scope) => {
  console.log(scope.model)
  scope.form.validate(valid => {
    if (valid) {
      ElMessage.success('提交成功')
    } else {
      ElMessage.error('表单校验失败')
      return false
    }
  })
}

let onReset = () => {
  form.value.resetFields()
}
</script>

<template>
  <div>
    <m-form
      ref="form"
      :options="options"
      label-width="100px"
      @upload:on-success="handleSuccess"
    >
      <template #uploadArea>
        <el-button type="primary">上传</el-button>
      </template>
      <template #uploadTip>
        <div class="el-upload__tip">
          jpg/png files with a size less than 500KB.
        </div>
      </template>
      <template #actions="scope">
        <el-button type="primary" @click="onSubmit(scope)">提交</el-button>
        <el-button @click="onReset">重置</el-button>
      </template>
    </m-form>
  </div>
</template>

<style lang="scss" scoped></style>
